<!--
 * @Author: xuzehan 123@qq.com
 * @Date: 2023-05-31 11:08:21
 * @LastEditors: xuzehan 123@qq.com
 * @LastEditTime: 2023-06-07 16:40:17
 * @FilePath: \ant-design-vue-jeecg-master\src\views\netResourceManagement\modules\statistics.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <a-modal
    title="占用统计"
    width="55%"
    :visible="visible"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <div>
      <h3>各类目占比</h3>
      <div class="chartBox">
        <div id="mainSLOT"></div>
        <div id="mainFrequency"></div>
      </div>
    </div>
  </a-modal>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {
      visible: false,
      confirmLoading: false,
    }
  },
  watch: {
    visible(val) {
      console.log(val)
      if (val) {
        this.$nextTick(() => {
          this.init()
          this.init1()
        })
      }
    },
  },
  mounted() {
    // this.init()
    // this.init1()
  },
  methods: {
    showModal() {
      this.visible = true
    },
    handleOk(e) {
      this.confirmLoading = true
      setTimeout(() => {
        this.visible = false
        this.confirmLoading = false
      }, 2000)
    },
    handleCancel(e) {
      console.log('Clicked cancel button')
      this.visible = false
    },
    init() {
      var chartDom = document.getElementById('mainSLOT')
      var myChart = echarts.init(chartDom)
      var option

      option = {
        title: {
          text: '时隙占用状况',
          //控制标题位置
          x: 'center',
          y: 'bottom',
        },
        tooltip: {
          trigger: 'item',
        },
        legend: {
          top: '5%',
          left: 'center',
        },
        series: [
          {
            // name: 'Access Fr222',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2,
            },
            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold',
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 18, name: '占用' },
              { value: 12, name: '未占用' },
            ],
          },
        ],
      }

      option && myChart.setOption(option)
    },
    init1() {
      var chartDom = document.getElementById('mainFrequency')
      var myChart = echarts.init(chartDom)
      var option

      option = {
        title: {
          text: '频道占用状况',
          //控制标题位置
          x: 'center',
          y: 'bottom',
        },
        tooltip: {
          trigger: 'item',
        },
        legend: {
          top: '5%',
          left: 'center',
        },
        series: [
          {
            // name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2,
            },
            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold',
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1783, name: '占用' },
              { value: 137, name: '未占用' },
            ],
          },
        ],
      }

      option && myChart.setOption(option)
    },
  },
}
</script>

<style>
#mainSLOT,
#mainFrequency {
  width: 400px;
  height: 400px;
}
.chartBox {
  display: flex;
  justify-content: space-around;
}
</style>
